<template>
  <div class="index">
    <div class="search">
      <!-- 定位当前位置 -->
      <div class="city"
      @click="toMappage">{{cityName}}</div>
      <div class="input-container"
       @click="toSearch">
        <input type="text" placeholder="搜索商品" />
        <span class="icon"></span>
      </div>
    </div>

    <div class="swiper">
      <swiper class="swiper-container"
       indicator-dots="true"
       autoplay="true"
       interval="3000"
       circular="true"
       duration="500">
        <block v-for="(item,index) in banner" :key="index">
          <swiper-item class="swiper-item">
            <image class="slide-image" :src="item.image_url" />
          </swiper-item>
        </block>
      </swiper>
    </div>

    <div class="channel">
      <div class="channel-item"
       v-for="(item, index) in channel" :key="index"
       @click="categoryList(item.id)">
        <img class="channel-image" :src="item.icon_url" />
        <p>{{item.name}}</p>
      </div>
    </div>

    <div class="brand">
      <div class="head" @click="tobrandList">品牌制造商直供</div>
      <div class="brand-content">
        <div class="brand-item" v-for="(item, index) in brandList" :key="index"
         @click="branddetail(item.id)">
          <div class="brand-text">
            <p class="brand-name">{{item.name}}</p>
            <p class="brand-price">{{item.floor_price}}元起</p>
          </div>
            <img class="brand-image" :src="item.new_pic_url" />
        </div>
      </div>
    </div>

    <div class="newgoods">
      <div class="newgoods-top" @click="goodsList('new')">
        <div>
          <p class="top">新品首发</p>
          <p class="top top-two">查看全部</p>
        </div>
      </div>
      <div class="newgoods-container">
        <ul class="newgoods-item">
          <scroll-view class="newgoods-list"
           :scroll-x="true">
            <li class="newgoods-content" v-for="(item, index) in newGoods" :key="index">
              <img class="newgoods-image" :src="item.list_pic_url" />
              <p class="newgoods-name newgoods-text">{{item.name}}</p>
              <p class="newgoods-desc newgoods-text">{{item.goods_brief}}</p>
              <p class="newgoods-price newgoods-text">￥{{item.retail_price}}</p>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>

    <div class="newgoods">
      <div class="newgoods-top hotgoods-top" @click="goodsList('hot')">
        <div>
          <p class="top">
            人气推荐
            <span class="top-one"></span>
            好物精选
          </p>
          <p class="top top-two">查看全部</p>
        </div>
      </div>
      <div class="newgoods-container">
        <ul class="newgoods-item">
          <scroll-view class="newgoods-list"
           :scroll-x="true">
            <li class="newgoods-content" v-for="(item, index) in hotGoods" :key="index">
              <img class="newgoods-image" :src="item.list_pic_url" />
              <p class="newgoods-name newgoods-text">{{item.name}}</p>
              <p class="newgoods-desc newgoods-text">{{item.goods_brief}}</p>
              <p class="newgoods-price newgoods-text">￥{{item.retail_price}}</p>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>

    <div class="topicList">
      <div class="topicList-top">
        专题精选
        <span class="topicList-icon"></span>
      </div>
      <div class="topicList-container">
        <ul class="topicList-item">
          <scroll-view class="topicList-content" :scroll-x="true">
            <li class="topicList-list" v-for="(item,index) in topicList" :key="index"
             @click="topicdetail(item.id)">
              <img class="topicList-image" :src="item.item_pic_url">
              <div class="btom">
                <div class="btom-text">
                  <p class="btom-title">{{item.title}}</p>
                  <p class="btom-subtitle">{{item.subtitle}}</p>
                </div>
                <div class="btom-price">
                  {{item.price_info}}元起
                </div>
              </div>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>
    <div class="newcategory">
      <div class="newcategory-list" v-for="(item, index) in newCategoryList" :key="index">
        <div class="newcategory-head">{{item.name}}好物</div>
        <div class="newcategory-sublist">
          <div class="newcategory-item" v-for="(subitem, subindex) in item.goodsList" :key="subindex">
            <img class="newcategory-image" :src="subitem.list_pic_url" />
            <p class="newcategory-name">{{subitem.name}}</p>
            <p class="newcategory-price">{{subitem.retail_price}}</p>
          </div>
          <div class="newcategory-item last">
            <p>{{item.name}}好物</p>
            <span class="newcategory-icon"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import amapFile from '../../utils/amap-wx'
import { mapState,mapMutations } from 'vuex'
import { get } from '../../utils'
export default {
  data() {
    return {
      banner: [],
      channel: [],
      brandList: [],
      newGoods: [],
      hotGoods: [],
      topicList: [],
      newCategoryList: []
    }
  },
  computed: {
    // 从state中读取数据
    ...mapState(['cityName'])
  },
  mounted() {
    this.getData(),
    this.getCityName()
  },
  methods: {
    ...mapMutations(['update']),
    toMappage() {
      // 先通过 wx.getSetting 查询用户是否有授权
      let _this = this
      wx.getSetting({
        success: (res) => {
          // 如果没有同意授权，打开设置
          // console.log(res)
          if(!res.authSetting['scope.userLocation']) {
            wx.openSetting({
              success: res => {
                // 获取授权位置信息
                _this.getCityName()
              }
            })
          } else {
            wx.navigateTo({
              url: '/pages/mappage/main',
            })
            // _this.getCityName()
          }
        },
        fail: (err) => {
          console.log(err)
        },
        complate: () => {}
      })
    },
    getCityName() {
      let _this = this
      // 需要引入SDK包才可以使用 amapFile
      // 通过申请注册开发者账号拿到高德key
      var myAmapFun = new amapFile.AMapWX({key:'256d94ac927c73a25e9177d789a1d060'});
      myAmapFun.getRegeo({
        success(data) {
          // console.log(data)
        },
        fail(info) {
          console.log(info)
          // 如果当前授权失败默认显示北京
          _this.update({cityName: '北京'})
        }
      })
    },
    // 接口请求取数据源
    async getData() {
      const data = await get('/index/index')
      // console.log(data)
      this.banner = data.banner
      this.channel = data.channel
      this.brandList = data.brandList
      this.newGoods = data.newGoods
      this.hotGoods = data.hotGoods
      this.topicList = data.topicList
      this.newCategoryList = data.newCategoryList
    },
    toSearch() {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    categoryList(id) {
      wx.navigateTo({
        url: '/pages/categoryList/main?id=' + id
      })
    },
    branddetail(id) {
      wx.navigateTo({
        url: '/pages/branddetail/main?id=' + id
      })
    },
    tobrandList() {
      wx.navigateTo({
        url: '/pages/brandList/main'
      })
    },
    goodsList(info) {
      if(info == 'hot') {
        wx.navigateTo({
          url: '/pages/newgoods/main?isHot=' + 1
        })
      } else {
        wx.navigateTo({
          url: '/pages/newgoods/main?isNew=' + 1
        })
      }
    },
    topicdetail(id) {
      wx.navigateTo({
        url: '/pages/topicdetail/main?id=' + id
      })
    }
  }
}
</script>

<style scoped>
@import './style.css';
</style>